<template>
  <view class="chat-container">
    <view class="chat-header">
      定制简历
    </view>
    <view class="chat-messages">
      <scroll-view class="chat-list" id="chat-list" ref="chatList" scroll-y :scroll-top="scrollTop" @scroll="scroll">
        <view v-for="(message, index) in messages" :key="index" class="message-item">
          <view class="message-content" :class="{'message-from-me': message.fromMe, 'message-from-them': !message.fromMe}">
            <image v-if="!message.fromMe" class="item-avatar" src="https://img3.job1001.com/ylt/images/xiaolan_icon.png" @click="handleClickAvatar(item)"></image>
            <view class="item-text">{{ message.text }}</view>
            <image v-if="message.fromMe" class="item-avatar" :src="pic || 'https://img3.job1001.com/ylt/images/avatar_default.png'" @click="handleClickAvatar(item)"></image>
          </view>
        </view>
        <view v-if="!isStart" class="btn-start" @click="handleToStart">
          <u-loading v-if="msgLoading"></u-loading>
          开始</view>
      </scroll-view>

    </view>
    <view v-if="!isFinish && isStart" class="chat-input">
      <u-input v-model="newMessage" class="input-field" placeholder="请输入聊天内容" :cursor-spacing="80"  ></u-input>
      <view class="btn-send" @click="sendMessage">发送</view>
    </view>
    <view v-if="isFinish">
      <view class="btn-start" :loading="loading" @click="handleToCustomized">开始定制简历</view>
    </view>
  </view>
</template>

<script>
import { getZpQuestion, startAskAnalysis } from '../api/resumeApi.js';
export default {
  props: {
    zpId: [String, Number],
    personId: [String, Number],
    jobName: String,
    pic: String,
  },
  data() {
    return {
      messages: [
        { text: '您好，接下来，我将会提3个问题了解您的基本情况，点击“开始”立即进行对话。', fromMe: false },
      ],
      newMessage: '',
      isStart: false,
      replyCount: 0, // 自动回复的数量
      maxReplyCount: 3, // 最大自动回复数量
      autoMessage: [],
      isFinish: false,
      scrollTop: 0,
      old: {
          scrollTop: 0
      },
      myMessage: [],
      loading: false,
      msgLoading: false,
      lines: 0,
    };
  },
  methods: {
    getQuestions() {
      if (!this.zpId || this.autoMessage.length > 0) {
        return;
      }
      const params = {
        zpId: this.zpId,
      };
      this.msgLoading = true;
      getZpQuestion(params).then(res => {
        if (res.code === 200 && res.data.length > 0 ) {
          this.autoMessage = res.data;
        } else {
          uni.showToast({
            title: '获取问题失败，请稍后再试',
            icon: 'none',
          });
        };
      }).finally(() => {
        this.msgLoading = false;
      });
    },
    handleToStart() {
      if (this.msgLoading) {
        uni.showToast({
          title: '正在获取问题，请稍后再试',
          icon: 'none',
        });
        return;
      }
      this.isStart = true;
      this.messages.push({text: '开始', fromMe: true});
      this.autoReply();
    },
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        this.messages.push({ text: this.newMessage, fromMe: true });
        this.myMessage.push(this.newMessage);
        this.newMessage = '';
        // 自动回复
        this.toBottom();
        
        setTimeout(() => {
          this.autoReply();
        }, 500); // 模拟延迟
      }
    },
    autoReply() {
      // 模拟自动回复
      if (this.autoMessage.length < 1) {
        return;
      }
      if (this.replyCount < this.maxReplyCount) {
        this.messages.push({
          text: this.autoMessage[this.replyCount],
          fromMe: false,
        });
        this.replyCount++;
        this.toBottom();
      } else {
        this.isFinish = true;
      }
    },
    scroll: function(e) {
        this.old.scrollTop = e.detail.scrollTop
    },
    goTop: function(e) {
        
    },
    // 滚动到底部
    toBottom() {
      this.scrollTop = this.old.scrollTop
      this.$nextTick(function() {
          this.scrollTop = 9999
      });
    },
    handleToCustomized() {
      const params = {
        zpId: this.zpId,
        personId: this.personId,
        answer1: this.myMessage[0],
        answer2: this.myMessage[1],
        answer3: this.myMessage[2],
      };
      this.loading = true;
      startAskAnalysis(params).then(res => {
        if (res.code === 200) {
          uni.navigateTo({
            url: '/pagesSub/public/customizedResume/analysis?type=chat&taskId=' + res.data.taskId,
          });
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 70vh;
}

.chat-messages {
  flex: 1;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
}

.chat-list {
  flex-grow: 1;
  height: 850rpx;
}

.chat-header {
  padding: 28rpx 0;
  text-align: center;
}

.message-item {
  padding: 13rpx 32rpx;
  border-radius: 5px;
}

.message-content {
  display: flex;
  justify-content: flex-start;
}

.item-avatar {
  flex-shrink: 0;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.message-from-me {
  justify-content: flex-end;

  .item-text {
    margin-right: 24rpx;
  }
}

.message-from-them {
  .item-text {
    margin-left: 24rpx;
  }
}

.item-text {
  width: 478rpx;
  padding: 22rpx;
  background-color: #f2f2f2;
}

.chat-input {
  display: flex;
  padding: 20rpx;
  align-items: center;
  border-top: 1px solid #ccc;
}
::v-deep .u-input__textarea {
  height: 50rpx;
}

.input-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 25px;
  margin-right: 10px;
}

.btn-send {
  border-radius: 8rpx;
  color: #ffffff;
  padding: 8rpx 32rpx;
  background: $u-type-primary;
}

.btn-start {
  margin: 0 auto;
  width: 488rpx;
  text-align: center;
  border: 1px solid $u-type-primary;
  border-radius: 50rpx;
  padding: 30rpx 24rpx;
  color: $u-type-primary;
}

</style>
